<template>
   <el-dialog :title="$t('message.selectTheDeviceForPush')" v-model="dialogPush" class="dialog-push">
       <div style="margin:10px 0;">
          <el-button type="primary" v-on:click="pushSubmit"><i class="el-icon-circle-check el-icon--left"></i>{{$t('message.submitPush')}}</el-button>
          <span class="require-icon"></span><el-input style="width: 50%" v-model="pushInfor" @blur="checkEmpty" :class="{'empty-error':pushInforEmpty}" :placeholder="$t('message.inputTheReasonForPush')"></el-input><span style="color:#f34b4b;margin-left:5px;" v-show="pushInforEmpty">{{$t('message.reasonForPushIsRequird')}}</span>
       </div>
       <section class="tree_list">
          <p class="panel_title">{{$t('message.deviceList')}}</p>
          <el-tree :data="pushDevices" @node-click="handleNodeClick" :highlight-current="true" show-checkbox :props="props" :default-expand-all="true" ref="tree" node-key="sn" class="push-dialog-tree" style="width:100%;"></el-tree>
       </section>
    </el-dialog>
</template>
<script>
    import $ from 'jquery'
    import {GloabFun}from '../assets/js/common.js'
    
	export default{
		data(){
        return{
          dialogPush:false,
          pushInforEmpty:false,
          pushInfor:'',
          pushItemId:'',
          pushItemType:'',
          AndroidConfigId:''
        }
		},
		props:{
			pushDevices:{
				type:Array,
				default:[]
			},
			props:{
				type:Object,
				require:true
			}
		},
		methods:{
          pushSubmit(){
          	if(!this.checkEmpty()){
          	  var selectKeys=this.$refs['tree'].getCheckedKeys();
              console.log('selectKeys',selectKeys);
          	  if(selectKeys.length>0){
                this.pushLoading = true;
                this.$emit("pushSubmit",{ControlSns:selectKeys,Reason:this.pushInfor});
                // if(this.pushItemId!=""){
          	  	  //  this.$emit("pushSubmit",{FirmwareId:this.pushItemId,Platform:this.pushItemType,ControlIds:selectKeys,Reason:this.pushInfor});
                //  }else if(this.AndroidConfigId!=""){
                //    this.$emit("pushSubmit",{AndroidConfigId:this.AndroidConfigId,ControlIds:selectKeys,Reason:this.pushInfor});
                //  }
          	  }else{
          	  	this.$alert(this.$t('message.selectPushObject'), this.$t('message.warning'), {
                  confirmButtonText: this.$t('message.yes'),
                  type: 'error'
                });
          	  }
          	}else{
          	   this.$message({
                  message: this.$t('message.reasonForPushIsRequird'),
                  type: 'error'
               });
          	}
          },
          checkEmpty(){
          	if(GloabFun.trim(this.pushInfor).length>0){
              this.pushInforEmpty=false;
              return false;
            }else{
              this.pushInforEmpty=true;
              return true;
            }
          },
          showDialog(){
            this.dialogPush=true;
          },
          closeDialog(){
            this.dialogPush=false;
            this.pushInfor='';
          },
          handleNodeClick(data) {
             if(this.contain(this.$refs['tree'].getCheckedKeys(false),data.Id)){
                this.$refs['tree'].setChecked(data.Id,false,false);
             }else{
                this.$refs['tree'].setChecked(data.Id,true,false);
             }
          },
          contain(array,id){
            for(var i=0;i<array.length;i++){
               if(array[i]===id){
                 return true
               }
            }
            return false;
          }
		},
    created(){
       this.$nextTick(function(){
               $(".push-dialog-tree").find("input").removeAttr("disabled");
            });
    }
	}
</script>
  <style lang="less">
     /* .push-dialog-tree{
       input
     } */
  </style>
<style scoped>
 .require-icon::before{
   content:'*';
   color:#f34b4b;
   margin-right:4px;
   margin-left: 20px;
 }
</style>